<script setup>
import { logout } from '@/api/set.js'
import {useUserStore} from "@/stores/index.js";
import router from "@/router/index.js";
const onClickLeft = () => history.back();

/**
 * 退出登录
 */
const userStore = useUserStore()
const clickLogout = () => {
  const token = userStore.token
  logout(token).then(res => {
    if (res.data.code === 1) {
      // eslint-disable-next-line no-undef
      showToast('退出成功')
      router.push({ path: '/home' })
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>
<template>
  <div class="set-page">
  <van-nav-bar
    left-arrow
    left-text="返回"
    title="设置"
    fixed
    placeholder
    @click-left="onClickLeft"
  />
  <van-cell-group inset title="基本设置">
    <van-cell is-link title="个人信息" to="/info"/>
    <van-cell is-link title="修改密码"/>
    <van-cell is-link title="忘记密码"/>
    <van-cell is-link title="注销账号"/>
  </van-cell-group>
    <van-cell-group inset title="主页设置">
      <van-cell is-link title="通用设置"/>
      <van-cell is-link title="隐私设置"/>
    </van-cell-group>
    <van-cell-group inset title="关于">
      <van-cell is-link title="用户协议"/>
      <van-cell is-link title="关于我们"/>
    </van-cell-group>
    <div class="logout-btn-container">
    <div class="logout-btn" @click="clickLogout">退出登录</div>
    </div>
    <div class="version">orange-friends v0.1.0 Copyright Aloda 2024 </div>
    <div class="copyright"></div>
  </div>
</template>

<style scoped>
.set-page {
  background-color: #f6f6f6; /* 设置背景颜色为灰色 */
  height: 100vh;
}

.logout-btn-container {
  padding: 16px;
}

.logout-btn {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  background: linear-gradient(90deg, #ecb43c, #ff0000);
  color: #fff;
  border-radius: 39px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logout-btn:active {
  background: linear-gradient(90deg, #ecb43c, rgba(255, 0, 0, 0.76));
}

.version {
  width: 100%;
  font-size: 14px;
  color: #999;
  text-align: center;
}
</style>
